<script setup lang="ts">
import { ArrowRight, Expand, Grid } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'

interface RuleForm {
    name: string
    region: string
    count: string
    date1: string
    date2: string
    delivery: boolean
    location: string
    type: string[]
    resource: string
    desc: string
    num: string
    reason: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
    name: '',
    region: '',
    count: '',
    date1: '',
    date2: '',
    delivery: false,
    location: '',
    type: [],
    resource: '',
    desc: '',
    num: '',
    reason: ''
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules<RuleForm>>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    num: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    reason: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    region: [
        {
            required: true,
            message: 'Please select Activity zone',
            trigger: 'change',
        },
    ],
    count: [
        {
            required: true,
            message: 'Please select Activity count',
            trigger: 'change',
        },
    ],
    date1: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a date',
            trigger: 'change',
        },
    ],
    date2: [
        {
            type: 'date',
            required: true,
            message: 'Please pick a time',
            trigger: 'change',
        },
    ],
    location: [
        {
            required: true,
            message: 'Please select a location',
            trigger: 'change',
        },
    ],
    type: [
        {
            type: 'array',
            required: true,
            message: 'Please select at least one activity type',
            trigger: 'change',
        },
    ],
    resource: [
        {
            required: true,
            message: 'Please select activity resource',
            trigger: 'change',
        },
    ],
    desc: [
        { required: true, message: 'Please input activity form', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<template>
    <div class="head">申请休假</div>
    <div class="bread">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/c' }">时间管理</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/c' }">申请休假</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <div class="body">
        <div class="aaa">
            <div class="l1">
                <el-icon>
                    <Expand />
                </el-icon>
            </div>
            <div class="l2">
                填写休假信息
            </div>
        </div>
        <div class="l3">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" :size="formSize" status-icon>
                <el-form-item label="申请人" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>

                <el-form-item label="休假日期" required>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="ruleForm.date1" type="date" aria-label="Pick a date"
                                placeholder="Pick a date" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                    <el-col class="text-center" :span="2">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item prop="date1">
                            <el-date-picker v-model="ruleForm.date1" type="date" aria-label="Pick a date"
                                placeholder="Pick a date" style="width: 100%" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
                <el-form-item label="假期类型" prop="region">
                    <el-select v-model="ruleForm.region" placeholder="请选择假期类型">
                        <el-option label="调休假" value="调休假" />
                        <el-option label="年假" value="年假" />
                        <el-option label="病假" value="病假" />
                        <el-option label="事假" value="事假" />
                        <el-option label="产假" value="产假" />
                        <el-option label="护理假" value="护理假" />
                        <el-option label="婚假" value="婚假" />
                        <el-option label="丧假" value="丧假" />
                    </el-select>
                </el-form-item>

                <el-form-item label="请假天数" prop="num">
                    <el-input v-model="ruleForm.num" type="number" />
                </el-form-item>

                <el-form-item label="请假理由" prop="reason">
                    <el-input v-model="ruleForm.reason" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        Create
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">Reset</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped>
.aaa {
    display: flex;
    border: 1px solid #000;
}

.l1 {
    width: 40px;
    height: 40px;
    /* background-color: rgb(0, 0, 0, 0.5); */
    line-height: 40px;
    text-align: center;
    border-right: 1px solid #000;
}

.l2 {
    width: calc(100% - 40px);
    height: 40px;
    /* background-color: #733838; */
    line-height: 40px;
    padding-left: 10px;
}
.l3{
    padding: 50px;
    padding-left: 100px;
}

.head {
    height: 30px;
    background-color: rgb(255, 255, 255);
    line-height: 30px;
    font-size: 30px;
    padding: 25px;
    color: #000;
}

.bread {
    height: 30px;
    background-color: rgb(215, 215, 215);
    padding-top: 20px;
    padding-left: 20px;
    vertical-align: bottom;
}

.body {
    width: 100%;
    height: 100%;
    /* background-color: rgb(126, 52, 52); */
    padding: 0;
}
</style>